<!doctype html>
<html class="no-js h-100" lang="en" xmlns:th="http://www.thymeleaf.org" >
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link th:href="@{/css/all.css}" rel="stylesheet">
    <link th:href="@{'https://fonts.googleapis.com/icon?family='+'Material+Icons'}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" id="main-stylesheet" data-version="1.1.0" th:href="@{/styles/shards-dashboards.1.1.0.min.css}">
    <link rel="stylesheet" th:href="@{/styles/extras.1.1.0.min.css}">
    <script async defer th:src="@{/js/buttons.js}"></script>
    <style>
      .menu-dark-backdrop {
        background: rgba(0,0,0,0);
        transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
      }
      .menu-dark-backdrop.in {
        height: 100%;
        z-index: 90001;
        display: block;
        background: rgba(0,0,0,0.5);
      }
      .left{
        z-index: 90002;
        position: relative;
        left: 21%;
      }
    </style>
  </head>
  <!--  更新表-->
  <div id="update" class="menu-dark-backdrop">
    <div class="left">
      <div class="col-lg-9 col-md-12">
        <!-- Add New Post Form -->
        <div class="card card-small mb-3">
          <div class="card-body">
            <form action="/index/updatePost" class="add-new-post" id="from">
              <input name="title" class="form-control form-control-lg mb-3" type="text" placeholder="Your Post Title">
              <input name="date" class="form-control form-control-lg mb-3" type="date">
              <select id="background" name="background" class="form-control form-control-lg mb-3" type="text" list="imageList" placeholder="Your Post BackGround">
<!--              <datalist id="imageList">-->
                <option th:each="back:${backList}" th:value="${back.back}" th:text="${back.back}">图片</option>
<!--              </datalist>-->
              </select>
              <div class="form-group col-md-12">
                <label for="feDescription">Content</label>
                <textarea id="feDescription" class="form-control" name="content" rows="5"></textarea>
              </div>
              <li class="list-group-item d-flex px-3">
                <div class="btn btn-sm btn-outline-accent" onclick="Cancel()">Cancel</div>
                <a th:href="@{'/index/deletePost'}" class="btn btn-sm btn-outline-accent ml-auto" id="delete">Delete</a>
                <button class="btn btn-sm btn-accent " type="submit">
                  Update
                </button>
              </li>
            </form>
          </div>
        </div>
        <!-- / Add New Post Form -->
      </div>
    </div>
  </div>
  <!--  更新表-->
    <div class="container-fluid">
      <div class="row">
        <main class="main-content col-lg-10 col-md-9 col-sm-12 p-0 offset-lg-2 offset-md-3">
          <div class="main-navbar sticky-top bg-white">
            <!-- Main Navbar -->
          </div>
          <!-- / .main-navbar -->
          <div class="main-content-container container-fluid px-4">
            <!-- Page Header -->
            <div class="page-header row no-gutters py-4">
              <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
                <span class="text-uppercase page-subtitle">Dashboard</span>
                <h3 class="page-title">Blog Overview</h3>
              </div>
            </div>
            <!-- End Page Header -->
            <!-- Small Stats Blocks -->
            <div class="row">
              <div class="col-lg col-md-6 col-sm-6 mb-4">
                <div class="stats-small stats-small--1 card card-small">
                  <div class="card-body p-0 d-flex">
                    <div class="d-flex flex-column m-auto">
                      <div class="stats-small__data text-center">
                        <span class="stats-small__label text-uppercase">Posts</span>
                        <h6 class="stats-small__value count my-3">2,390</h6>
                      </div>
                      <div class="stats-small__data">
                        <span class="stats-small__percentage stats-small__percentage--increase">4.7%</span>
                      </div>
                    </div>
                    <canvas height="120" class="blog-overview-stats-small-1"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-lg col-md-6 col-sm-6 mb-4">
                <div class="stats-small stats-small--1 card card-small">
                  <div class="card-body p-0 d-flex">
                    <div class="d-flex flex-column m-auto">
                      <div class="stats-small__data text-center">
                        <span class="stats-small__label text-uppercase">Pages</span>
                        <h6 class="stats-small__value count my-3">182</h6>
                      </div>
                      <div class="stats-small__data">
                        <span class="stats-small__percentage stats-small__percentage--increase">12.4%</span>
                      </div>
                    </div>
                    <canvas height="120" class="blog-overview-stats-small-2"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-lg col-md-4 col-sm-6 mb-4">
                <div class="stats-small stats-small--1 card card-small">
                  <div class="card-body p-0 d-flex">
                    <div class="d-flex flex-column m-auto">
                      <div class="stats-small__data text-center">
                        <span class="stats-small__label text-uppercase">Comments</span>
                        <h6 class="stats-small__value count my-3">8,147</h6>
                      </div>
                      <div class="stats-small__data">
                        <span class="stats-small__percentage stats-small__percentage--decrease">3.8%</span>
                      </div>
                    </div>
                    <canvas height="120" class="blog-overview-stats-small-3"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-lg col-md-4 col-sm-6 mb-4">
                <div class="stats-small stats-small--1 card card-small">
                  <div class="card-body p-0 d-flex">
                    <div class="d-flex flex-column m-auto">
                      <div class="stats-small__data text-center">
                        <span class="stats-small__label text-uppercase">Users</span>
                        <h6 class="stats-small__value count my-3">2,413</h6>
                      </div>
                      <div class="stats-small__data">
                        <span class="stats-small__percentage stats-small__percentage--increase">12.4%</span>
                      </div>
                    </div>
                    <canvas height="120" class="blog-overview-stats-small-4"></canvas>
                  </div>
                </div>
              </div>
              <div class="col-lg col-md-4 col-sm-12 mb-4">
                <div class="stats-small stats-small--1 card card-small">
                  <div class="card-body p-0 d-flex">
                    <div class="d-flex flex-column m-auto">
                      <div class="stats-small__data text-center">
                        <span class="stats-small__label text-uppercase">Subscribers</span>
                        <h6 class="stats-small__value count my-3">17,281</h6>
                      </div>
                      <div class="stats-small__data">
                        <span class="stats-small__percentage stats-small__percentage--decrease">2.4%</span>
                      </div>
                    </div>
                    <canvas height="120" class="blog-overview-stats-small-5"></canvas>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Small Stats Blocks -->
            <div class="row">
              <!-- Users Stats -->
              <div class="col-lg-8 col-md-12 col-sm-12 mb-4">
                <div class="card card-small">
                  <div class="card-header border-bottom">
                    <h6 class="m-0">Users</h6>
                  </div>
                  <div class="card-body pt-0">
                    <div class="row border-bottom py-2 bg-light">
                      <div class="col-12 col-sm-6">
                        <div id="blog-overview-date-range" class="input-daterange input-group input-group-sm my-auto ml-auto mr-auto ml-sm-auto mr-sm-0" style="max-width: 350px;">
                          <input type="text" class="input-sm form-control" name="start" placeholder="Start Date" id="blog-overview-date-range-1">
                          <input type="text" class="input-sm form-control" name="end" placeholder="End Date" id="blog-overview-date-range-2">
                          <span class="input-group-append">
                            <span class="input-group-text">
                              <i class="material-icons"></i>
                            </span>
                          </span>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 d-flex mb-2 mb-sm-0">
                        <button type="button" class="btn btn-sm btn-white ml-auto mr-auto ml-sm-auto mr-sm-0 mt-3 mt-sm-0">View Full Report &rarr;</button>
                      </div>
                    </div>
                    <canvas height="130" style="max-width: 100% !important;" class="blog-overview-users"></canvas>
                  </div>
                </div>
              </div>
              <!-- End Users Stats -->
              <!-- Users By Device Stats -->
              <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                <div class="card card-small h-100">
                  <div class="card-header border-bottom">
                    <h6 class="m-0">Users by device</h6>
                  </div>
                  <div class="card-body d-flex py-0">
                    <canvas height="220" class="blog-users-by-device m-auto"></canvas>
                  </div>
                  <div class="card-footer border-top">
                    <div class="row">
                      <div class="col">
                        <select class="custom-select custom-select-sm" style="max-width: 130px;">
                          <option selected>Last Week</option>
                          <option value="1">Today</option>
                          <option value="2">Last Month</option>
                          <option value="3">Last Year</option>
                        </select>
                      </div>
                      <div class="col text-right view-report">
                        <a href="#">Full report &rarr;</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Users By Device Stats -->
              <!-- Top Referrals Component -->
              <!-- End Top Referrals Component -->
            </div>

            <div class="row">
              <div class="col-lg-3 col-md-6 col-sm-12 mb-4" th:each="post:${postList}">
                <div class="card card-small card-post card-post--1">
                  <div class="card-post__image" th:style="'background-image: url('+${post.background}+')'">
                    <div class="card-post__author d-flex">
                      <div style="display: none" id="image" th:text="${post.background}"></div>
                      <a href="javascript:void(0)" class="card-post__author-avatar card-post__author-avatar--small" th:style="'background-image: url('+${post.head_portrait}+')'" >Written by Anna Kunis</a>
                    </div>
                  </div>
                  <div class="card-body" onclick="Edit(this)">
                    <h5 class="card-title">
                      <div class="text-fiord-blue" th:text="${post.title}"></div>
                    </h5>
                    <p class="card-text d-inline-block mb-3" th:text="${post.content}"></p>
                    <span class="text-muted" th:text="${post.date}"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>


    <script>
      var update=document.getElementById("update");
      function Edit(op){
        update.classList.add("in");
        var del=$("#delete");
        var inputs=$("#from").find("input");
        var content=$("#from").find("textarea");
        var image=$("#image");
        var title=$(op).children("h5").find("div").text();
        var imageLists=document.getElementById("background");
        for (var i=0;i<imageLists.length;i++){
          if(imageLists.children[i].value==image.text()){
            imageLists.children[i].setAttribute("selected", true);
          }
        }
        content.val($(op).children("p").text());
        inputs.eq(0).val(title);
        inputs.eq(1).val($(op).children("span").text());
        del.attr('href',"/index/deletePost/"+title);
      }

      function Cancel(){
        update.classList.remove("in");
      }

    </script>
    <script th:src="@{/scripts/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/scripts/popper.min.js}"></script>
    <script th:src="@{/scripts/bootstrap.min.js}"></script>
    <script th:src="@{/scripts/Chart.min.js}"></script>
    <script th:src="@{/scripts/shards.min.js}"></script>
    <script th:src="@{/scripts/jquery.sharrre.min.js}"></script>
    <script th:src="@{/scripts/extras.1.1.0.min.js}"></script>
    <script th:src="@{/scripts/shards-dashboards.1.1.0.min.js}"></script>
    <script th:src="@{/scripts/app/app-blog-overview.1.1.0.js}"></script>
  </body>
</html>